<template>
  <!-- 添加或编辑 -->
  <div class="forms">
    <el-button type="primary" @click="addButton">添加</el-button>
    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="dialog.isShowDialog" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="pid">
          <el-select
            v-model="ruleForm.pid"
            placeholder="请选择上级菜单"
            clearable
          >
            <el-option label="无" :value="0"></el-option>
            <el-option
              :label="item.title"
              :value="item.id"
              v-for="item in menuListData"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
          <el-radio v-model="ruleForm.type" :label="1">目录</el-radio>
          <el-radio v-model="ruleForm.type" :label="2">菜单</el-radio>
        </el-form-item>
        <el-form-item label="菜单图标" v-show="ruleForm.type == 1" prop="icon">
          <el-select
            v-model="ruleForm.icon"
            placeholder="请选择菜单图标"
            clearable
          >
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in iconArr"
              :key="index"
            >
              <template>
                <i :class="item"> </i>
              </template>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" v-show="ruleForm.type == 2" prop="url">
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="1"
            :inactive-value="2"
            inactive-color="#ff4949"
            v-model="ruleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="addMenu" v-if="title == '添加菜单'"
          >确 定</el-button
        >
        <el-button type="primary" @click="editMenu" v-else>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMenuAdd, getOneMenuInfo, getMenuedit } from "../../../request/api";
export default {
  props: ["menuListData", "dialog"],
  data() {
    return {
      // 对话框标题
      title: "",
      // 一个菜单的id
      mid: "",
      // 添加表单数据
      ruleForm: {
        pid: 0, //上级分类编号  注意：顶级菜单-0 number
        title: "", //菜单名称
        icon: "", //图标
        type: "", //类型 1目录2菜单 number
        url: "", //菜单地址
        status: 1, //1状态   1正常2禁用   number类型
      },
      // 验证规则
      rules: {
        title: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
        ],
        pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
        type: [
          { required: true, message: "请选择菜单类型", trigger: "change" },
        ],
      },
      // icon图标数据
      iconArr: [
        "el-icon-setting",
        "el-icon-user",
        "el-icon-goods",
        "el-icon-delete",
        "el-icon-star-off",
        "el-icon-help",
        "el-icon-s-operation",
        "el-icon-s-grid",
      ],
    };
  },
  methods: {
    // 重置表单项
    resetFiled() {
      this.ruleForm = {
        pid: 0,
        title: "",
        icon: "",
        type: "",
        url: "",
        status: 1,
      };
    },
    // 隐藏对话框,重置表单项,刷新列表数据
    doMenuList() {
      // 隐藏对话框
      this.dialog.isShowDialog = false;
      // 刷新列表数据
      this.$emit("refreshList");
    },
    // 点击添加按钮
    addButton() {
      // 重置表单项
      this.resetFiled();
      // 修改对话框标题
      this.title = "添加菜单";
      // 展示编辑对话框
      this.dialog.isShowDialog = true;
    },
    // 添加菜单
    addMenu() {
      if (this.ruleForm.type == 1) {
        this.ruleForm.url = "";
      } else {
        this.ruleForm.icon = "";
      }
      // 表单验证
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return this.$message.error("请填写必要的表单项");
        // 验证通过,调用接口
        getMenuAdd(this.ruleForm).then(
          (res) => {
            if (res.data.code == 200) {
              this.$message.success(`${res.data.msg}`);
              this.doMenuList();
            } else {
              this.$message.warning(`${res.data.msg}`);
            }
          },
          (err) => err
        );
      });
    },
    // 获取一个菜单的数据,填入编辑对话框
    getOneMenuData(id) {
      this.mid = id;
      getOneMenuInfo({ id }).then(
        (res) => {
          if (res.data.code == 200) {
            this.ruleForm = res.data.list;
            // 修改对话框标题
            this.title = "编辑菜单";
            // 展示编辑对话框
            this.dialog.isShowDialog = true;
          }
        },
        (err) => err
      );
    },
    // 编辑菜单
    editMenu() {
      let obj = {
        id: this.mid,
        ...this.ruleForm,
      };
      getMenuedit(obj).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success(`编辑成功`);
            this.doMenuList();
          }
        },
        (err) => err
      );
    },
  },
};
</script>

<style scoped>
.el-button {
  margin-bottom: 20px;
}
</style>